<template>
  <el-form
    ref="amsform"
    size="mini"
    label-position="left"
    label-width="90px"
    :model="amsDeclare"
    :rules="rules"
  >
    <el-card class="margin-bottom">
      <div slot="header" class="clearfix relative small-header">
        <el-row>
          <el-col :span="2" :offset="0">
            <div class="title-icon">
              <span>AMS申报</span>
            </div>
          </el-col>
          <el-col :span="2">
            <a
              href="/#/main/setting__bingfmscustomer__list"
              target="_blank"
              class="text-blue"
              >申报客户信息管理</a
            >
          </el-col>
          <el-col
            :span="20"
            class="text-right"
            v-if="!(waybillData.ams && waybillData.ams >= 1)"
          >
            <el-button
              size="mini"
              type="success"
              @click="checkForm('updateAmsDeclare')"
              >保存</el-button
            >
            <el-button size="mini" @click="checkForm('amsDeclare')"
              >申报</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item prop="amsShipper" label='发件人：'>
       
            <div>
              <el-select
                v-model="amsDeclare.amsShipper"
                filterable
                placeholder="请选择发件人"
                @change="declareCustomer($event, 'amsShipper')"
              >
                <el-option
                  v-for="(v, i) in restaurants"
                  :key="i"
                  :label="v"
                  :value="parseInt(i)"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <InfoCard v-if="showamsShipper" :info="amsShipper" />
        </el-col>
        <el-col :span="8">
          <el-form-item prop="amsConsignee" label='收件人：'>
         
            <div>
              <el-select
                v-model="amsDeclare.amsConsignee"
                filterable
                placeholder="请选择收件人"
                @change="declareCustomer($event, 'amsConsignee')"
              >
                <el-option
                  v-for="(v, i) in restaurants"
                  :key="i"
                  :label="v"
                  :value="parseInt(i)"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <InfoCard v-if="showamsConsignee" :info="amsConsignee" />
        </el-col>
        <el-col :span="2">
          <!--/#/main/setting__bingfmscustomer__list-->
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import InfoCard from "./InfoCard";
export default {
  props: {
    pageType: {
      type: String,
      default: ""
    },
    waybillData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    restaurants: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
    components: {
    InfoCard
  },
  data() {
    return {
      showamsShipper:false,
      showamsConsignee:false,
      amsShipper:{},
      amsConsignee:{},
      amsDeclare: {
        amsShipper: 0,
        amsConsignee: 0
      },
      loading: false,
      showAmsDeclare: false,
      rules: {
        amsShipper: [{ required: true, message: "请选择", trigger: "change" }],
        amsConsignee: [{ required: true, message: "请选择", trigger: "change" }]
      }
      // restaurants: {}
    };
  },
  mounted() {
    this.amsDeclare.id = this.waybillData.id;
    this.amsDeclare.amsShipper = this.waybillData.amsShipper;
    this.amsDeclare.amsConsignee = this.waybillData.amsConsignee;
    if(this.amsDeclare.amsShipper) {
      this.declareCustomer(this.amsDeclare.amsShipper, "amsShipper");
    }
    if(this.amsDeclare.amsConsignee) {
      this.declareCustomer(this.amsDeclare.amsConsignee, "amsConsignee");
    }
  },
  methods: {
    checkForm(name) {
      this.$refs.amsform.validate(valid => {
        if (valid) {
          if (name === "updateAmsDeclare") {
            this.updateAmsDeclare();
          } else {
            this.amsDeclareFn();
          }
        }
      });
    },

    async updateAmsDeclare() {
      this.loading = true;
      const { code, message } = await ajax("updateAmsDeclare", this.amsDeclare,{
        class: "com.tofba.app.client.seaair.SeaAirWaybillMergeEditClient"
      });
      this.loading = false;
      if (code !== 200) {
        this.$message.error(message | "保存失败");
        return;
      }
      this.$message.success("保存成功");
    },
    async amsDeclareFn() {
      this.loading = true;
      const { code, message } = await ajax("amsDeclare", {
        id: this.waybillData.id
      },{
        class: "com.tofba.app.client.seaair.SeaAirWaybillMergeEditClient"
      });
      this.loading = false;
      if (code !== 200) {
        this.$message.error(message || "申报失败");
        return;
      }
      this.$message.success("申报成功");
    },
        async declareCustomer(id, type) {
   
      this.loading = true;
      const { code, data, message } = await ajax("declareCustomer", {
        id: id
      });
      this.loading = false;
      if (code !== 200) {
        this.$message.error(message || "获取数据失败");
        return;
      }
      this[`show${type}`] = true;
      this[type] = data;

    },
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}

.btn-header >>> .el-card__header {
  padding: 8px 20px;
}
.icoFontlist {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
